<template>
  <view class="card padding-28-40 center gap-30 zh-CN" style="justify-content: flex-start">
    <view :class="['padding-30 radio-20 center type', getTypeImage(title)]">
      <image :src="`/static/ext/${getTypeImage(title)}.svg`" style="width: 80rpx; height: 80rpx;"/>
    </view>
    <view class="flex-column gap-20" style="justify-content: space-around;align-items: flex-start">
      <view class="text-32">{{ title }}</view>
      <view class="flex-center gap-30 color-blue text-28">
        <view hover-class="hover" @click="onView" class="view">{{ lang.print_preview }}</view>
        <view>{{ myReplace(lang.totalPages, '{page}', totalPage) }}</view>
      </view>
    </view>
  </view>
</template>

<script>
import {getTypeImage, myReplace} from "@/utils/utils"

export default {
  name: 'FileNameCard',
  props: {
    title: {
      type: String,
      default: ''
    },
    totalPage: {
      type: Number,
      default: 0
    },
  },

  computed: {
    lang() {
      return this.$t('print_pay')
    }
  },

  methods: {
    myReplace,
    getTypeImage,
    onView() {
      this.$emit('onView')
    },
  },
}
</script>

<style lang="scss">
.view {
  background: #ffffff;
  border-radius: 30rpx;
  border-style: solid;
  border-color: $uni-color-primary;
  border-width: 2rpx;
  padding: 6rpx 18rpx 6rpx 18rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: $uni-color-primary;
  font-size: 24rpx;
  font-weight: 400;
}
</style>
